<!doctype html>
<html ondragstart="return false">
 <head>
     <meta charset="UTF-8">
     <meta name="Keywords" content="关键字">
     <meta name="Description" content="描述">
     <title>星空</title>
	 <style>
		*{
			margin:0;
			padding:0;
		}
		#thecanvas{
			background-color:#000;
		}
	 </style>
 </head>
 <body>
	<canvas id = 'thecanvas'></canvas>
	<script>
		var can = document.getElementById('thecanvas');
		var canvas = can.getContext('2d');
		var H = window.innerHeight,W = window.innerWidth;
		window.onload = resize;
		window.onresize = resize;
		resize();
		function resize(){
			let h = window.innerHeight;
			can.height =  h;
			H = h;
			let w = window.innerWidth;
			can.width = w;
			W = w;
		}
		class Star
		{
			constructor(data){
				this.r = 10;
				this.x = 0;
				this.y = 0;
				this.x3d = 0;
				this.y3d = 0;
				this.z3d = 800;
				this.dx = 0;
				this.dy = 0;
				this.vx = 0;
				this.vy = 0;
				this.vz = 0;
				this.ax = 0;
				this.ay = 0;
				this.az = 0;
				this.f = 0;
				this.Hx = 0;
				this.Wx = 0;
				this.fn = 100;
				this.ScaleX = 1;
				this.SCaleY = 1;
				this.FillStyle = 'rgb(255,255,255)';
				Object.assign(this,data)
			}
			CreateStar(canvas){
				this.CalculatePosition();
				canvas.save();
				canvas.translate(this.Wx,this.Hx);
				canvas.scale(this.ScaleX,this.ScaleY);
				canvas.beginPath();
				var color = canvas.createRadialGradient(this.x,this.y,0,this.x,this.y,this.r);
				color.addColorStop(0,'rgb(255,255,255)');
				color.addColorStop(0.3,'rgb(255,255,255)');
				color.addColorStop(1,this.FillStyle);
				canvas.fillStyle = color;
				canvas.arc(this.x,this.y,this.r,0,Math.PI*2);
				canvas.fill();
				canvas.closePath();
				canvas.restore();
			}
			CalculatePosition(){
				this.ScaleX = this.ScaleY = this.fn/(this.fn + this.z3d);
				this.x = this.dx+this.x3d*this.ScaleX;
				this.y = this.dy+this.y3d*this.ScaleY;
			}
		}
		var balls = [],num = 300,Fn = 100,Dx = 0,Dy = 0;
		function Rp(arr){
			var [a,b] = arr;
			return Math.random()*(b-a)+a;
		}
		function Init(){
			for(var i = 0 ; i < num ;i++){
				var color = `rgb(${Math.floor(Rp([0,255]))},${Math.floor(Rp([0,255]))},${Math.floor(Rp([0,255]))})`;
				balls.push(new Star({
					Hx:H/2,
					Wx:W/2,
					r:Rp([0,15]),
					x3d:Rp([-4*W,4*W]),
					y3d:Rp([-4*H,4*H]),
					z3d:Rp([0,800]),
					vx:Rp([-3,3]),
					vy:Rp([-1,1]),
					vz:Rp([-2,-0.5]),
					ax:Rp([-0.02,0.02]),
					ay:Rp([-0.02,0.02]),
					az:Rp([-0.02,0]),
					fn:Fn,
					FillStyle:color
				}))
			}
		}
		function StarMove(){
			canvas.clearRect(0,0,W,H);
			for(var i = 0; i < num ;i++){ 
				balls[i].x3d += balls[i].vx;
				balls[i].vx += balls[i].ax;
				balls[i].y3d += balls[i].vy;
				balls[i].vy += balls[i].ay;
				balls[i].z3d += balls[i].vz;
				balls[i].vz += balls[i].az;
				if(balls[i].z3d<-Fn){
					balls[i].z3d = 800;
					balls[i].r = Rp([0,15]);
					balls[i].x3d = Rp([-4*W,4*W]);
					balls[i].y3d = Rp([-4*H,4*H]);
					balls[i].vx = Rp([-3,3]);
					balls[i].vy = Rp([-1,1]);
					balls[i].vz = Rp([-2,-0.5]);
					balls[i].ax = Rp([-0.05,0.05]);
					balls[i].ay = Rp([-0.05,0.05]);
					balls[i].az = Rp([-0.05,0]);
				}
			
				balls[i].CreateStar(canvas);
			}
		}
		Init();
		(function move(){
			window.requestAnimationFrame(move);
		    StarMove();
		})()
	</script>
 </body>
</html>